<!-- 流程管理-组件库管理-新增或编辑组件分类信息 -->
<template>
  <div class="main-app">
    <el-page-header @back="cancel" :content="title" style="margin: 1%;"></el-page-header>
    <div style="margin-top: 25px; margin-left: 1%;">({{$t('common.title.tipLeft')}}<span style="color: red">*</span>{{$t('common.title.tipRight')}})</div>
    <el-row style="margin-top: 10px">
      <el-form ref="form" :model="form" :rules="rules" style="width: 50%; margin-left: 25%" label-width="15%">
        <el-form-item :label="$t('common.label.classifyCnName')" prop="cnName" required>
          <el-input v-model="form.cnName" />
        </el-form-item>
        <el-form-item :label="$t('common.label.classifyEnName')" prop="enName" required>
          <el-input v-model="form.enName" />
        </el-form-item>
        <el-form-item :label="$t('common.label.sort')" prop="sort" required>
          <el-input-number v-model="form.sort" :min="1" style="width:100%;"></el-input-number>
        </el-form-item>
        <el-form-item :label="$t('common.label.status')" required>
          <el-radio-group v-model="form.status">
            <el-radio :label="0">{{$t('common.label.enable')}}</el-radio>
            <el-radio :label="1">{{$t('common.label.disable')}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('common.label.remark')" prop="remark">
          <el-input type="textarea" v-model="form.remark" :rows="4" maxlength="9999" show-word-limit />
        </el-form-item>
      </el-form>
    </el-row>
    <el-row style="margin-top: 40px; text-align: center">
      <el-form :inline="true" class="form-inline">
        <el-form-item>
          <el-button type="info" plain @click="cancel">{{$t('common.button.cancel')}}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="isLoading" @click="save">{{$t('common.button.save')}}</el-button>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import {
  FlowAssemblyClassifyDetail,
  SubmitFlowAssemblyClassify,
} from "../../../api/assembly.js";

export default {
  // 页面公共变量
  data() {
    return {
      isLoading: false,       // 是否显示加载框
      title: "",              // 顶部标题
      id: "",                 // 编辑数据的主键ID
      // 提交表单内容
      form: {
        sort: 0,
        status: 0,
      },
      // 表单验证项配置
      rules: {
        cnName: [{required:true, message:this.$t('common.prompt.rules.classifyCnName'), trigger:"blur"}],
        enName: [{required:true, message:this.$t('common.prompt.rules.classifyEnName'), trigger:"blur"}],
        sort: [{required:true, message:this.$t('common.prompt.rules.sort'), trigger:"blur"}],
        status: [{required:true, message:this.$t('common.prompt.rules.status'), trigger:"blur"}],
      },
    };
  },
  // 页面创建完成事件
  async created() {
    // 接收路由传递的参数
    const { id } = this.$route.params;

    // 动态设置标题
    if(id === undefined) {
      this.title = this.$t('common.title.addAssemblyClassify');
    } else {
      this.title = this.$t('common.title.editAssemblyClassify');
    }

    // 将接收到的数据填充至页面公共变量
    this.id = id;

    // 获取详情数据
    await this.getDataInfo(id);
  },
  // 页面相关方法
  methods: {
    // 获取详情数据
    async getDataInfo(id) {
      // 获取详情数据
      const { data } = await FlowAssemblyClassifyDetail({
        Id: id
      });
      if (data) {
        // 处理部分字段
        data.status = parseInt(data.status);

        // 设置表单数据
        this.form = data;
      }
    },
    // 保存数据事件
    save() {
      // 校验必填项
      this.$refs["form"].validate(async (valid) => {
        // 如果表单校验成功时执行
        if (valid) {
          // 准备提交数据
          let data = {
            FlowAssemblyClassifyData: {
              Id: this.id,
              CnName: this.form.cnName,
              EnName: this.form.enName,
              Sort: this.form.sort,
              Status: this.form.status.toString(),
              Remark: this.form.remark
            }
          };

          // // 测试：查看已生成的表单内容，不提交数据
          // console.log(data)
          // return;

          // 打开加载框
          this.isLoading = true;

          // 提交数据
          const { success, msg } = await SubmitFlowAssemblyClassify(data);

          // 关闭加载框
          this.isLoading = false;

          // 显示返回结果
          if (success) {
            this.$message({ type: 'success', message: msg });
            this.$router.back();
          } else {
            this.$message({ type: 'error', message: msg });
          }
        }
      });
    },
    // 返回事件
    cancel() {
      this.$router.back();
    },
  },
};
</script>
